<template>
  <!-- dialog弹出框：嵌套表单 -->
  <el-dialog @close="cancelDialog" :title="title" :visible="showDialog">
    <el-form ref="form" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          @focus="getSimple"
          v-model="form.manager"
          placeholder="请选择活动区域"
        >
          <el-option
            v-for="item in Siplist"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          type="textarea"
          :rows="4"
          v-model="form.introduce"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getDepartments,
  addDepartments,
  getEachDept,
  saveEachDept
} from '@/api/departments'
import { getEmpSimpleList } from '@/api/employees'
export default {
  //   父传子
  props: {
    //   是否显示弹出框
    showDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: String,
      required: true
    }
  },
  data () {
    //   自定义验证规则：校验是否有同名的子部门。
    // rule参数：规则对象，规则绑定的属性名、类型
    // value参数:当前绑定的表单的值
    // callback参数：函数，不关验证正确/失败，都要用到
    let checkName = async (rule, value, callback) => {
      // 1.1获取全部的部门数据，才能知道有没有同名：
      let res = await getDepartments()

      // 编辑部门：（点击有id跟随）
      if (this.form.id) {
        // 编辑部门验证:判断同级有无同名、同编码
        let list = res.data.depts.filter(item => item.pid == this.form.pid)

        let repeat = list.some(
          item => item.name == value && item.name != this.oldForm.name
        )

        repeat
          ? callback(new Error('同级部门已经有相同名称，不能重复'))
          : callback()
      } else {
        //   拿出这个部门的子节点：
        let list = res.data.depts.filter(item => {
          if (item.pid == this.pid) {
            // 找到了就返回
            return true
          }
        })

        // 遍历找到的子节点，判断有没有同名
        for (let i = 0; i < list.length; i++) {
          if (list[i].name == value) {
            return callback(new Error('不能有相同的部门名称！'))
          }
        }
        callback()
      }
    }

    // 校验部门编码
    const checkCode = async (rule, value, callback) => {
      let repeat
      // 发请求获取全部部门数据，判断有无相同的编码
      let res = await getDepartments()
      // console.log(res)
      if (this.form.id) {
        // 编辑部门的编码验证:
        repeat = res.data.depts.some(
          item => item.code == value && item.code != this.oldForm.code
        )
      } else {
        repeat = res.data.depts.some(item => item.code == value) //返回true/false
      }
      repeat
        ? callback(new Error('已经存在相同的部门编码，请重新输入！'))
        : callback()
    }

    return {
      // 负责人数组：
      Siplist: [],
      form: {},
      oldForm: {
        name: '',
        code: ''
      },
      //   校验规则：要给输入框prop
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 50, message: '内容在1-50长度', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        code: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '1-50个字符',
            trigger: 'blur'
          },
          //  不能有相同名称的子部门添加！
          { validator: checkCode, trigger: 'blur' }
        ],
        manager: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          }
        ],
        introduce: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 300,
            message: '1-300个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 点击取消：
    cancelDialog () {
      // 隐藏表单弹出框
      this.$emit('update:showDialog', false)
      // 清空表格数据：
      this.form = {}
      // 清空验证：
      // resetFields:对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.form.resetFields()
    },
    // 给下拉框加聚焦事件：
    async getSimple () {
      // 发请求获取负责人
      let res = await getEmpSimpleList()
      // console.log(res)
      this.Siplist = res.data
    },
    // 点击弹出框的确定按钮：对整个表单进行验证
    async add () {
      if (this.form.id) {
        // 编辑
        let res = await saveEachDept(this.form)
        // console.log(res)
        this.$message.success('修改部门成功')
      } else {
        // 新增
        // 表单验证方法：validate()
        this.$refs.form.validate(async value => {
          // 验证通过：
          if (value) {
            // 发起请求新增部门
            let res = await addDepartments({
              ...this.form,
              pid: this.pid
            })
            this.$message.success('新增部门成功')
            // console.log(res)
          }
        })
      }
      // 隐藏弹出框:通知父组件
      this.$emit('update:showDialog', false)
      // 最后通知父组件要重新请求部门数据，加载页面
      this.$emit('tongzhi')
    },
    // （编辑页用）获取单个部门详细信息：
    async getDept (id) {
      let res = await getEachDept(id)
      console.log(res)
      this.form = res.data
      this.oldForm.name = this.form.name
      this.oldForm.code = this.form.code
    }
  },
  computed: {
    title () {
      return this.form.id ? '编辑' : '新增'
    }
  }
}
</script>

<style></style>
